Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Menu widget based on phosphorjs #2232

Open
wants to merge 12 commits into
base: main
Choose a base branch
from

Conversation

maartenbreddels
Copy link
Member

(requires #2182 )
Adds Menu option to ipywidgets (still working out the details, very preliminary).
The plan is for a Button to have a Menu trait, like icon, so it can have a popup menu. We could also think of Menubars etc later on, or context menus.

menus

@maartenbreddels
Copy link
Member Author

The design is pretty similar to Qt, actually, I added the Action widget, just becase otherwise Button.default_action would be called Button.default_menu, but I think we could do without the Action widget.
I think we should discuss this at the next telecon.
A preview:

screen shot 2018-10-05 at 19 36 27

TODOS

  • when delay=None, the caret should be its own button, like bootstrap's split button. This is also how Qt behaves.
  • Resolve circular dependency for context menu both in ipywidgets and jupyter-widget/base+control
  • Have a menu bar
  • Think about an Application Widget, that will have a menu, status bar, toolbar with fullscreen button?

@maartenbreddels
Copy link
Member Author

I've added an Application widget, which includes a menubar and a toolbar. The menubar is actually just a Menu widget, since otherwise a MenuBar widget would be a meaningless Container class. The toolbar is actually just a List of DOMWidgets, but added do a div with a special class to allow some custom styling through css.
The way that evens are delivered through from view to view is using the DOM Event mechanism. All toolbar and menu dom elements can produce a custom event, which bubbles up till it reaches the Application view, and gets send to the central_widget_view, or a default handler is called.

It's all rough, but I think it shows where I want to go, and allows us to create really nice UI's for bqplot and ipyvolume (using only jslink), as this demo hopefully shows:

ipywidgets-application

Discussion material for our next telecon I'd say!

PS: Functionality like this would make this PR bqplot/bqplot#724 obsolete.

@martinRenou
Copy link
Member

It looks really good! Do you use jupyter-lab CSS variables in order to support dark theme?

@maartenbreddels
Copy link
Member Author

No, the CSS is a quick copy paste + edit from http://phosphorjs.github.io/examples/menus/, some pointers/help on how to proceed with the css would be appreciated

@martinRenou
Copy link
Member

Sure! I can help. Do I have commit rights on your branch?

@maartenbreddels
Copy link
Member Author

Yes, you should have.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants